<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* .wrap{

  } */
  .container {
    margin: 100px auto;
    /* display: flex;
    justify-content: space-around; */
    width: 700px;
    flex-wrap: wrap;
    border-radius: 10px;
    border: 1px solid olivedrab;
  }

  .title {
    width: 500px;
    font-size: 25px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 20px 100px 20px;
    background: rgb(157, 190, 138);
    color: rgb(238, 232, 232);
  }

  .system{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 700px;
  }

  .system-list {
    width: 200px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 20px;
    background: rgb(181, 214, 247);

  }

  .system-list.item {
    border: 1px solid rgb(29, 35, 36);

  }

  .choice {
    width: 300px;
    height: 60px;
    margin: 20px 200px;
    text-align: center;
    font-size: 28px;
  }
</style>

<body>
  <div class="wrap">
    <div class="container">
      <div class="title">今天中午吃什么？</div>
      <div class="system" id="system">
        <div id="system-list1" class="system-list">水煮肉片</div>
        <div id="system-list2" class="system-list">裹凉皮</div>
        <div id="system-list3" class="system-list">佛跳墙</div>
        <div id="system-list4" class="system-list">烤串</div>
        <div id="system-list5" class="system-list">炸鸡</div>
        <div id="system-list6" class="system-list">奶茶甜品</div>
        <div id="system-list7" class="system-list">麻辣香锅</div>
        <div id="system-list8" class="system-list">火锅</div>
        <div id="system-list9" class="system-list">糯米团</div>
      </div>
      <button id="start" class="choice" >开始选择</button>
    </div>
  </div>
  <script>
    var _system = document.getElementById('system');
    var _choice = document.getElementById('start'); 
    var foods = ['水煮肉片', '裹凉皮', '佛跳墙', '烤串', '炸鸡', '奶茶甜品', '麻辣香锅', '火锅', '糯米团'];
    var _foods_str = '';
    for (let v of foods) {
      _foods_str += '<div class="system-list">' + v + '</div>';
    }
    _system.innerHTML = _foods_str;
    _choice.onclick = function(){
      for (let i in foods){
        _system.children[i].children[0].setAttribute('class','system-list');
        
      }
      var _r_index = Math.floor(foods.length * Math.random());
      _system.children[_r_index].children[0].setAttribute('class', 'system-list item');
    }

    // function foodsMeal() {
    //   var _choice = document.getElementById('start');
    //   var foods = ['水煮肉片', '裹凉皮', '佛跳墙', '烤串', '炸鸡', '奶茶甜品', '麻辣香锅', '火锅', '糯米团'];
    //   var _r_index = Math.floor(foods.length * Math.random());
    //   var _foods = document.getElementById('system-list' + [_r_index + 1]);
    //   var _foods_class = _foods.getAttribute('class');
    //   _foods.setAttribute('class', 'system-list-choice');
    // }
  </script>
</body>

</html>